<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<topLogo title="公益宣传"></topLogo>
			<view class="banner_div">
				<view class="wrap">
					<view class="" v-for="(item, index) in banner" :key="index" v-if="index<1">
						<image mode="scaleToFill" class="banner_image" :src="$public.imgageUrl(item.images)"
							@click="$public.navto('tiKuList')">
						</image>
					</view>
					<!-- <uni-swiper-dot class="uni-swiper-dot-box" :info="banner" mode="round" :current="current"
						:dots-styles="swiperData">
						<swiper class="swiper-box" :current="swiperDotIndex" @change="change" autoplay="auto">
							<swiper-item v-for="(item, index) in banner" :key="index" @click="openBanner(item,index)">
								<image v-if="!item.showVideo" mode="scaleToFill" class="swiperimage"
									:src="$public.imgageUrl(item.images)"></image>
								<video v-else :src="videoUrl" controls class="videocss"></video>
							</swiper-item>
						</swiper>
					</uni-swiper-dot> -->
				</view>
			</view>
			<view class="wrap">
				<view class="jdxc_div">
					<jxwTitle title="禁毒宣传" :showMore="true" url="/pages/news/imageList" :param="{columnId:9}"></jxwTitle>
					<view class="gyxc-div" @click="$public.navto('/pages/news/detail',{articleId:item.articleId})"
						v-for="(item ,index) in tzList" :index="index" :key="index" v-if="index==0">
						<image :src="$public.imgageUrl(item.images)" mode="scaleToFill" class="image"></image>
						<view class="title">
							{{item.title}}
						</view>
						<view class="nr">
							<image src="/static/sj_xc_nr.png" mode="scaleToFill" class="image-icon"></image> 内容：<text
								class="text">{{item.json.nr}}</text>
						</view>
						<view class="dd">
							<image src="/static/sj_xc_nr.png" mode="scaleToFill" class="image-icon"></image> 地点：<text
								class="text">{{item.json.dd}}</text>
						</view>
						<view class="time">
							<image src="/static/sj_xc_nr.png" mode="scaleToFill" class="image-icon"></image> 时间：<text
								class="text">{{item.json.startTime}}至{{item.json.endTime}}</text>
						</view>

					</view>
				</view>
			</view>
			<view class="wrap ">
				<view class="pfxc-div">
					<jxwTitle title="普法宣传" :showMore="true" url="/pages/news/imageList" :param="{columnId:10}"></jxwTitle>
					<view class="pf-list">
						<view v-for="(item,index) in pufaData" :key="index" v-if="index<3">
							<view class="grid-item-box" @click="$public.navto('/pages/news/detail',{articleId:item.articleId})">
								<view class="image-div">
									<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
								</view>
								<view class="text-div">
									<view class="text">{{item.title}}</view>
									<view class="abstract">{{item.remark}}</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrap">
				<view class="pfxc-div">
					<jxwTitle title="答题积分排行榜" :showMore="true" url="paiHangBang"></jxwTitle>
					<view class="dtjf-div">
						<view class="dtjf-list" v-for="(item,index) in paiHangData" :key="index" v-if="index<5">
							<view class="head-img">
								<image :src="$public.imgageUrl(item.headImg)" mode="scaleToFill" class="image"></image>
								<view class="nick-name">
									{{item.nickName}}
								</view>
							</view>

							<view class="jifen">
								<text class="redtext">{{item.useScore}}</text> 积分
							</view>
							<view class="user-lv">
								普法{{$public.jfLevelName($public.jfLevel(item.useScore))}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	/* import {
		mapState
	} from 'vuex'
	import share from '@/store/index.js' */
	export default {
		data() {
			return {
				videoUrl: "",
				banner: [],
				notice: "",
				productList: [],
				swiperData: {
					selectedBackgroundColor: "#1ca7ec",
					selectedBorder: "#1ca7ec",
					backgroundColor: "#d3d3d3",
					border: "#d3d3d3",
				},
				pufaData: [],
				swiperDotIndex: 0,
				current: 0,
				tzList: [],
				paiHangData: []
			}
		},
		async onLoad() {
			this.$public.showLoading()

		},
		onShow() {
			this.getBanner();
			this.getXuanChuan();
			this.getPuFa()
			this.getPaiHang()
		},
		methods: {
			getBanner() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 11,
					tj: ""
				}).then((res) => {
					console.log("getBanner res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.showVideo = false
						})
						that.banner = data.data
					}
					uni.hideLoading();
				})
			},
			openBanner(item, index) {
				if (item.files) {
					this.banner[index].showVideo = true
					this.videoUrl = item.files
					// this.$refs.videodiv.open("center")
					return false;
				}
				if (item.keyword) {
					if (item.keyword.indexOf("serviceId-") >= 0) {
						let serviceId = item.keyword.split("-")[1];
						this.$public.navto("/pages/service/detail", {
							serviceId: serviceId
						})
					} else {
						let articleId = item.keyword.split("-")[1];
						this.$public.navto("/pages/news/detail", {
							articleId: articleId
						})
					}
				}
			},
			getXuanChuan() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 9,
					tj: 0
				}).then((res) => {
					console.log("getXuanChuan res", res)
					let data = res.data;
					if (data.code == 0) {
						if (data.data.length > 0) {
							data.data[0].json = JSON.parse(data.data[0].remark)
							that.tzList.push(data.data[0])
						}
					}
				})
			},
			getPuFa() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 10,
					tj: 0
				}).then((res) => {
					console.log("getPuFa res", res)
					let data = res.data;
					if (data.code == 0) {
						that.pufaData = data.data
					}
				})
			},
			getPaiHang() {
				let that = this
				this.$public.htmlPost("/api/getUserDaTiJiFen").then((res) => {
					console.log("getUserDaTiJiFen res", res)
					let data = res.data;
					if (data.code == 0) {
						that.paiHangData = data.data
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #fff;
		background: url(#{$imageUrl}/webbg.png) top center no-repeat;
		background-size: 100% auto;

		.sm-div {
			padding: $uni-wrap-padding;

			.sm-div-bg {
				background: #fff;
				padding: 40rpx;
				border-radius: 20rpx;
				min-width: 500rpx;

			}
		}

		.wrap {
			padding: $uni-wrap-padding;
		}

		.triangle-down {
			width: 0;
			height: 0;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-top: 12rpx solid #94bbe5;
		}

		.banner_div {
			margin: 30rpx 0;

			.banner_image {
				width: 100%;
				height: 368rpx;
			}
		}

		.jdxc_div {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;

			.gyxc-div {
				.image {
					width: 100%;
					height: 356rpx;
					margin-bottom: 30rpx;
				}

				.title {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
					margin-bottom: 15rpx;
				}

				.nr,
				.dd,
				.time {
					font-size: 26rpx;
					color: #999999;
					line-height: 2;
					display: flex;
					align-items: center;
				}

				.text {
					color: #333333;
				}

				.image-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}
			}
		}


		.pfxc-div {
			// height: 704rpx;
			background: #fff;
			background-size: 100% auto;
			border-radius: 16rpx;
			padding: 30rpx 48rpx;
			margin-top: 30rpx;

			.pf-list {
				.grid-item-box {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.image-div {
						.image {
							width: 240rpx;
							height: 180rpx;
						}

					}

					.text-div {
						width: 300rpx;

						.abstract {
							font-size: 26rpx;
							color: #666666;
							margin-top: 16rpx;

							display: -webkit-box;
							-webkit-line-clamp: 3;
							/* 指定要显示的最大行数 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							line-height: 36rpx;
						}

						.text {
							font-weight: bold;
							font-size: 30rpx;
							color: #333333;
						}
					}
				}
			}


		}

		.dtjf-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 30rpx;

			.head-img {
				width: 230rpx;
				display: flex;
				align-items: center;

				.image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}

			.nick-name {
				width: 160rpx;
				// height: 56rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 指定要显示的最大行数 */
				// white-space: nowrap;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;


				// line-height: ;
			}

			.jifen {
				width: 160rpx;
				height: 56rpx;
				color: #999999;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				line-height: 56rpx;

				.redtext {
					color: #DF686A;
					padding-right: 10rpx;
				}
			}

			.user-lv {
				text-align: right;
				height: 56rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				line-height: 56rpx;
			}
		}

	}
</style>